<template>
	<div class="peraoal">
		<div class="template" v-show="loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>个人中心</div>
			<div @click="more"><img src="../assets/navgation.png"></div>
		</header>
		<div class="navigation_d" v-show="isShow">
			<div @click="home">首页</div>
			<div @click="my">我的</div>
			<div @click="seek">搜索</div>
			<div @click="news">消息</div>
		</div>
		<!--顶部用户信息-->
		<div class="logs">
			<div class="logs_t" v-if="token !=''">
				<!--<div ><img src="../assets/navlead.png"></div>-->
				<div @click='set'><img src="../assets/set.png"></div>
			</div>
			<div class="nologs">
				<div class="user">
					<div>
						<img src="../assets/morentouxiang.png" v-if="token == ''"  @click="user">
						<img :src="userinfo.userHeadimg" v-if="token != ''" @click="username">
					</div>
					<div v-if="token ==''"  @click="user">登录/注册</div>
					<div v-if="token != ''" @click="username">
						<div>{{userinfo.userNickname}}</div>
						<div class="Ucoin">{{userinfo.jifeng}}U币</div>
					</div>
				</div>
				
				<div class="usermoney" v-if="token !=''">
					<div>账户余额</div>
					<div><span>{{userinfo.money}}</span>元</div>
					<div @click="withdraw">立即提现 ></div>
				</div>
			</div>
		</div>
		
		<!--我的收藏购物车店铺-->		
		<div class="mytitle">
			<div @click="mycollect">
				<div class="mytitlenum">{{collection}}</div>
				<div class="mytitlename">我的收藏</div>
			</div>
			<div @click="shoppingCarton">
				<div class="mytitlenum">{{shoppingCart}}</div>
				<div class="mytitlename">购物车</div>
			</div>
			<div @click="mystore">
				<div><img src="../assets/images1/myshopimg.png"></div>
				<div class="mytitlename">我的店铺</div>
			</div>
		</div>
		
		
		<!--订单-->
		<div class="indent">
			<div>我的订单</div>
			<div @click="allindenton">全部订单 <img src="../assets/right.png"></div>
		</div>
		
		<!--订单状态-->
		<div class="indentType">
			<div class="indentType_d" @click="paymenton">
				<div><img src="../assets/images1/book.png"></div>
				<div>待付款</div>
			</div>
			<div class="indentType_d" @click="shippingon">
				<div><img src="../assets/images1/car.png"></div>
				<div>待发货</div>
			</div>
			<div class="indentType_d" @click="stayreceivingon">
				<div><img src='../assets/images1/timecar.png'></div>
				<div>待收货</div>
			</div>
			<div class="indentType_d" @click="stayevaluateon">
				<div><img src="../assets/images1/newspic.png"></div>
				<div>待评价</div>
			</div>
			<div class="indentType_d" @click="aftersaleon">
				<div><img src="../assets/images1/cost.png"></div>
				<div>退货/售后</div>
			</div>
		</div>
		
		<div class="bottomModule">
			<div class="bottomModuleList" @click="inviterecordon">
				<div><img src="../assets/yaoqingjilu.png"></div>
				<div>邀请记录</div>
				<i></i>
			</div>
			
			<div class="bottomModuleList" @click="coupon">
				<div><img src="../assets/youhuiquan.png"></div>
				<div>我的优惠劵</div>
			</div>
			
			<div class="bottomModuleList" @click="complaint">
				<div><img src="../assets/tousujianyi.png"></div>
				<div>投诉建议</div>
			</div>
			
			<div class="bottomModuleList" @click="helpon">
				<div><img src="../assets/bangzhuzhongxin.png"></div>
				<div>帮助中心</div>
			</div>
			
			<div class="bottomModuleList" @click="findIndent">
				<div><img src="../assets/orderimg.png"></div>
				<div>找回订单</div>
			</div>
		</div>
		
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				token:'',
				url:'',   //跳转登录
				userinfo:[],   //用户信息
				collection:0,  //收藏数量
				shoppingCart:0,  //购物车数量
				loading:true,
				isShow:false,
			}
		},
		created(){
			this.token = localStorage.getItem('token');
			this.url =  window.location.href;
			if(this.token == '' || this.token == null){
				this.token = '';
			}
			//获取用户信息
			if(this.token !='' && this.token !=null){
				var url = BaseUrl + 'users/index?token=' + this.token + '&appId=wap';
				this.$http.post(url).then(res=>{
					if(res.data.code == '10000'){
						this.loading = false;
						this.userinfo = res.data.userinfo;
						this.collection = res.data.userinfo.collection;
						this.shoppingCart = res.data.userinfo.shoppingCart;
					}else{
						this.loading = false;
						this.$router.push({
							path:'/enter?url=1'
						})
						localStorage.setItem('url', this.url);
					}
				}).catch(error=>{
					this.loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}else{
				this.token = "";
				this.loading = false;
			}
			
		},
		methods:{
			//更多
			more:function(){
				this.isShow = !this.isShow;
			},
			//首页
			home:function(){
				this.$router.push({ path: '/' }) 
			},
			//我的
			my:function(){
				this.$router.push({ path: '/personalContent' })
			},
			//搜索
			seek:function(){
				this.$router.push({ path: '/seekgoods' })
			},
			//消息
			news:function(){
				this.$router.push({ path: '/news' })
			},
			//导航退后
			retreat:function(){
//				window.history.go(-1);
				this.$router.push({path:'/index'})
			},
			//登录
			user:function(){
				this.$router.push({
					path:'/enter?url=1'
				})
				localStorage.setItem('url', this.url);
			},
			//个人信息
			username:function(){
				this.$router.push({
					path:'/personal'
				})
//				localStorage.setItem('url', this.url);
			},
			//购物车
			shoppingCarton:function(){
				this.$router.push({
					path:'/cart'
				})
			},
			//收藏
			mycollect:function(){
				this.$router.push({
					path:'/mycollect'
				})
			},
			//设置
			set:function(){
				this.$router.push({
					path:'/set'
				})
			},
			//提现
			withdraw:function(){
				this.$router.push({
					path:'/withdrawDeposit'
				})
			},
			//全部订单
			allindenton:function(){
				this.$router.push({
					path:'/myindent'
				})
				localStorage.setItem('state','4')
			},
			//待付款
			paymenton:function(){
				this.$router.push({
					path:'/myindent'
				})
				localStorage.setItem('state','0')
			},
			//待发款
			shippingon:function(){
				this.$router.push({
					path:'/myindent'
				})
				localStorage.setItem('state','1')
			},
			//待收款
			stayreceivingon:function(){
				this.$router.push({
					path:'/myindent'
				})
				localStorage.setItem('state','2')
			},
			//待评价
			stayevaluateon:function(){
				this.$router.push({
					path:'/myindent'
				})
				localStorage.setItem('state','3')
			},
			//退货/售后
			aftersaleon:function(){
				this.$router.push({
					path:'/aftersalesservice'
				})
			},
			//我的红包劵
			coupon:function(){
				this.$router.push({
					path:'/mycoupon'
				})
			},
			//我的店铺
			mystore:function(){
				this.$router.push({
					path:'/mystore'
				})
			},
			//邀请记录
			inviterecordon:function(){
				this.$router.push({
					path:'/inviterecord'
				})
			},
			//帮助中心
			helpon:function(){
				this.$router.push({
					path:'/help'
				})
			},
			//投诉建议
			complaint:function(){
				this.$router.push({
					path:'/complaint'
				})
			},
//			//找回订单
			findIndent:function(){
				this.$router.push({
					path:'/findIndent'
				})
			}
		}
	}
	
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.peraoal{
		background: #fff;
	}
	/*顶部*/
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation div:nth-child(1) img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation div:nth-child(3) img{
		width: 0.4rem;
		height: 0.6rem;
		display: block;
	}
	.navigation_d{
		width: 1.8rem;
		position:fixed;
		z-index: 9;
		top: 1rem;
		right: 0;
	}
	.navigation_d div{
		width: 100%;
		height: 0.8rem;
		text-align: center;
		line-height: 0.8rem;
		background: rgba(0,0,0,0.5);
		margin-bottom: 0.05rem;
		color: #FFFFFF;
	}
	/*用户登录状态*/
	.logs{
		padding: 0.42rem 0.25rem 0 0.25rem;
		height: 3.2rem;
		background-image:url(../assets/w.png);
		background-size: 100% 100%;
	}
	.logs_t{
		display: flex;
		align-items: center;
		flex-direction:row-reverse;
		margin-bottom: 0.3rem;
	}
	.logs_t div img{
		width: 0.44rem;
		height: 0.38rem;
		margin-right: 0.2rem;
	}
	/*.logs_t div:nth-child(1) img{
		width: 0.43rem;
		height: 0.60rem;
	}*/
	.nologs{
		display: flex;
		justify-content: space-between;
		color: #FFF;
	}
	.user{
		display: flex;
		align-items: center;
		font-size: 0.34rem;
	}
	.nologs img{
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		margin-right: 0.2rem;
	}
	.Ucoin{
		font-size: 0.3rem;
		color: #ffea95;
	}
	.usermoney{
		color: #fff;
	}
	.usermoney div:nth-child(1){
		font-size: 0.23rem;
	}
	.usermoney div:nth-child(2) span{
		font-size: 0.5rem;
		color: #ffea95;
	}
	
	/*我的收藏购物车店铺*/
	.mytitle{
		padding: 0.4rem 0;
		display: flex;
		text-align: center;
		justify-content: space-around;
		border-bottom: 0.12rem  solid #f2f2f2;
	}
	.mytitlenum{
		font-size: 0.25rem;
		color: #323232;
	}
	.mytitlename{
		font-size: 0.27rem;
		color: #656565;
	}
	.mytitle img{
		width: 0.4rem;
		height: 0.36rem;
	}
	
	.indent{
		margin: 0 0.25rem;
		padding: 0.2rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #cccccc;
	}
	.indent div:nth-child(1){
		padding-left: 0.2rem;
		border-left: 0.04rem solid #ff2040;
		color: #323232;
		font-size: 0.3rem;
	}
	.indent div:nth-child(2){
		color: #989898;
		font-size: 0.23rem;
	}
	.indent div:nth-child(2) img{
		width: 0.12rem;
		height: 0.22rem;
	}
	
	/*订单状态*/
	.indentType{
		display: flex;
		justify-content: space-around;
		padding: 0.2rem 0.25rem;
	}
	.indentType_d div{
		text-align: center;
		font-size: 0.26rem;
		color: #656565;
	}
	.indentType_d img{
		width: 0.64rem;
		height: 0.6rem;
	}
	
	/*底部模块*/
	.bottomModule{
		background: #f2f2f2;
		padding-top:0.1rem ;
		box-sizing: border-box;
		overflow: hidden;
	}
	.bottomModuleList{
		width: 32%;
		height: 1.8rem;
		padding-top: 0.34rem;
		float: left;
		background: #fff;
		text-align: center;
		font-size: 0.27rem;
		color: #656565;
		margin-bottom: 0.05rem;
	}
	.bottomModuleList:nth-child(2){
		margin-right: 0.135rem;
		margin-left: 0.135rem;
	}
	.bottomModuleList:nth-child(5){
		margin-right: 0.135rem;
		margin-left: 0.135rem;
	}
	.bottomModuleList div:nth-child(1){
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		margin: 0 auto;
		margin-bottom: 0.2rem;
	}
	.bottomModuleList div:nth-child(1) img{
		width: 0.7rem;
		height: 0.7rem;
	}
	.bottomModuleList i{
		width: 0.69rem;
		height: 0.69rem;
		background-image: url(../assets/song.png);
		background-size: 100%;
		display: block;
		position: relative;
		top: -1.65rem;
    	right: -1.7rem;
	}
</style>